<%@page contentType="text/html;charset=utf-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>tree示例</title>
		<cw:base />
		<script>
			var json = [{ "text" :"安徽省", "id" :200, "leaf" :false, "cls" :"folder",	
										"children" : [ 
								 			{ "text" :"黄山市", "id" :201, "leaf" :true, "cls" :"file" }, 
								 			{	"text" :"淮北市", "id" :202, "leaf" :true, "cls" :"file" }, 
								 			{ "text" :"巢湖市", "id" :241, "leaf" :true, "cls" :"file" },
								 			{ "text" :"六安市", "id":242, "leaf" :true, "cls" :"file" } 
								 	]	}, 
								 	{ "text" :"山东省", "id" :100, "leaf"	:false, "cls" :"folder", 
								 		"children" : [ 
								 			{ "text" :"潍坊市", "id" :101, "leaf"
								   	:true, "cls" :"file" }, 
									   	{ "text" :"泰安市", "id" :102, "leaf" :true, "cls"	:"file" }, 
									   	{ "text" :"日照市", "id" :141, "leaf" :true, "cls" :"file" }, 
									   	{	"text" :"烟台市", "id" :142, "leaf" :true, "cls" :"file" } 
								   ] }, 
								   { "text"	:"江西省", "id" :300, "leaf" :false, "cls" :"folder",
								     "children" : [ 
								     	{ "text" :"上饶市", "id" :301, "leaf" :true, "cls" :"file" }, 
								     	{ "text" :"鹰潭市", "id"	:302, "leaf" :true, "cls" :"file" }, 
								     	{ "text" :"九江市", "id" :341, "leaf"	 :true, "cls" :"file" } 
								   ] }, 
								   { "text" :"湖北省", "id" :410, "leaf" :false,"cls" :"folder", 
								   	 "children" : [ 
								   	 	{ "text" :"荆州市", "id" :411, "leaf" :true,	"cls" :"file" }, 
								   	 	{ "text" :"武汉市", "id" :412, "leaf" :true, "cls" :"file" }
								 	 ] }, 
								 	 { "text" :"广东省", "id" :510, "leaf" :false, "cls" :"folder", 
								 	 	 "children": [ 
								 	 	 	{ "text" :"肇庆市", "id" :511, "leaf" :true, "cls" :"file" },
								 	 	 	{ "text" :"汕头市", "id" :512, "leaf" :true, "cls" :"file" } 
								 	 ] }, 
								 	 { "text" :"上海市",	"id" :134, "leaf" :true, "cls" :"folder" }, 
								 	 { "text" :"四川省", "id" :135,	 "leaf" :true, "cls" :"folder" }, 
								 	 { "text" :"江苏省", "id" :136, "leaf" :true,	 "cls" :"folder" } 
								 	 ];
								 	 
			//加载前的数据操作
			function treeBeforeLoad(treeLoader, node) {
				this.baseParams.pid = node.id;
			}
			//点击树节点的操作
			function treeClick(node, e) {
				alert(node.id);
			}
			//当树节点改变时的操作
			function treeCheckChange(node, checked) {
				alert(node.text + "," + checked);
			}
</script>
	</head>
	<body>
		<li>
			<b> 树型控件将数据以层级结构的方式展现到界面上，并且能够体现父子，层级，顺序关系。</b>
		</li>
		<li>
			<b> 只读树主要是数据的层级展现，因此这里体现的是各种不同的数据展现形式 </b>
		</li>
		<br />
		<br />
		<li>
			树型控件的数据来源可以是静态的，可以通过jsp页面定义（不推荐），设置data="页面定义的数据对象"；也可以通过url="文件名"设置
			<table>
				<tr>
					<td>
						数据来源本页面:
						<cw:tree width="300" rootText="hello" data="json" height="200" />
					</td>
					<td>
						数据来源是文件:
						<cw:tree url="data.json" width="300" height="200" />
					</td>
				</tr>
			</table>
			<br>
		</li>
		<li>
			树型控件的数据来源可以是动态的，可以通过action远程加载，节点数据可以一次性加载（数据量大可以放缓存）；也可以逐层加载（每次展开仅加载当前层的数据）
			<table>
				<tr>
					<td>
						一次性加载节点数据:
						<cw:tree url="../../../sample/tree/fullTreeQuery.action" width="300" height="200" />
					</td>
					<td>
						逐层加载节点数据:
						<cw:tree url="../../../sample/tree/query.action" width="300" height="200" />
					</td>
					<td>
						初始展开层次(配置level属性,注意level相对于根节点层次0):
						<cw:tree url="../../../sample/tree/query.action" width="300" height="200" level="2" />
					</td>
				</tr>
			</table>
			<br>
		</li>
		<li>
			我们可以定义树节点的各种操作，包括节点点击后的事件（onClick），多选树节点选择的事件（treeCheckChange），并且可以隐藏根节点（rootVisible）
			<table>
				<tr>
					<td>
						节点点击后的事件（onClick）:
						<cw:tree width="300" rootText="hello" data="json" rootVisible="false" height="200" onClick="treeClick" />
					</td>
					<td>
						多选树节点选择的事件（treeCheckChange）：
						<cw:tree url="../../../sample/tree/fullTreeQuery.action" rootVisible="false" width="300" height="200"
							onCheckChange="treeCheckChange" />
					</td>
				</tr>
			</table>
			<br>
		</li>
	</body>
</html>
